<template>
  <a-comment>
    <template #actions>
      <span key="comment-basic-like">
        <a-tooltip title="赞">
          <template v-if="action === 'liked'">
            <LikeFilled @click="like" />
          </template>
          <template v-else>
            <LikeOutlined @click="like" />
          </template>
        </a-tooltip>
        <span style="padding-left: 8px; cursor: auto">
          {{ likes }}
        </span>
      </span>
      <span key="comment-basic-dislike">
        <a-tooltip title="踩">
          <template v-if="action === 'disliked'">
            <DislikeFilled @click="dislike" />
          </template>
          <template v-else>
            <DislikeOutlined @click="dislike" />
          </template>
        </a-tooltip>
        <span style="padding-left: 8px; cursor: auto">
          {{ dislikes }}
        </span>
      </span>
      <span key="comment-basic-reply-to" @click="cil">举报</span>
    </template>
    <template #author><a>{{ user }}</a></template>
    <template #avatar>
      <a-avatar :src="url" alt="" />
    </template>
    <template #content>
      <p>
        {{ text }}
      </p>
    </template>
    <template #datetime>
      <a-tooltip :title="dayjs().format('YYYY-MM-DD HH:mm:ss')">
        <span>{{ time }}</span>
      </a-tooltip>
    </template>
  </a-comment>
</template>
<script lang="ts" setup>
import dayjs from 'dayjs'
import { LikeFilled, LikeOutlined, DislikeFilled, DislikeOutlined } from '@ant-design/icons-vue'
import { ref } from 'vue'
import relativeTime from 'dayjs/plugin/relativeTime'
import axios from 'axios'
import { ElMessage } from 'element-plus'


dayjs.extend(relativeTime)
const props = defineProps<{
  user: string
  film: string
  text: string
  time: string
  email: string
  url: string
}>()

const likes = ref<number>(0)
const dislikes = ref<number>(0)
const action = ref<string>()
const like = () => {
  likes.value = 1
  dislikes.value = 0
  action.value = 'liked'
  console.log(props.film)
  console.log(props.email)
}

const dislike = () => {
  likes.value = 0
  dislikes.value = 1
  action.value = 'disliked'
}

const open2 = () => {
  ElMessage({
    message: '举报成功！',
    type: 'success',
  })
}
function cil() {
  open2()
  axios.get('/api/pn/jbc', {
    params: {
      email: props.email,
      id: props.text,
      file: props.film
    },
    headers: {
      Authorization: localStorage.getItem('token')
    }
  })
}
</script>

<style>


:where(.css-dev-only-do-not-override-19iuou).ant-comment .ant-comment-actions > li > span {
  color: white;
}

.anticon anticon-like {
  font-size: 15px;
}

.anticon svg {
  font-size: 15px;
  color: aliceblue;
}

.ant-comment-actions span {
  color: white;
}

:where(.css-dev-only-do-not-override-19iuou).ant-comment .ant-comment-content-author-name > * {
  color: rgb(255, 255, 255);
  font-size: 15px;
}

.ant-comment-content-author-time {
  color: #ffffff;
}

:where(.css-dev-only-do-not-override-19iuou).ant-comment .ant-comment-content-author-time {
  color: rgb(255, 255, 255);
}
</style>
